<template>
  <div class="register-container">
    <img src="@/assets/syslogo2.png" class="system-logo">
    <div class="main-context">
      <el-card class="box-card">
        <el-space direction="vertical" style="width: 100%" size="large">
          <el-space>
            <el-space direction="vertical" style="width: 100%" size="small">
              <h2 class="register-title">用户注册</h2>
            </el-space>
          </el-space>
          <el-form :model="formData" label-width="80px" :rules="rules" ref="formRef" style="width: 100%">
            <el-form-item label="用户名" prop="name">
              <el-input
                  style="width: 100%"
                  placeholder="请输入用户名"
                  v-model.trim="formData.name"
                  clearable
                  prefix-icon="User"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                  style="width: 100%"
                  placeholder="请输入密码"
                  show-password
                  v-model.trim="formData.password"
                  clearable
                  prefix-icon="Lock"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                  style="width: 100%"
                  placeholder="请再次输入密码"
                  show-password
                  v-model.trim="formData.confirmPassword"
                  clearable
                  prefix-icon="Lock"
              >
              </el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-space direction="vertical" alignment="left" style="width: 100%">
                <el-button @click="submitForm()" type="primary" class="register-btn">注 册</el-button>
                <router-link tag="span" :to="{path:'login'}" class="login-link">
                  <span>已有账号？去登录</span>
                </router-link>
              </el-space>
            </el-form-item>
          </el-form>
        </el-space>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import http from "@/utils/http.js";
import router from "@/router/index.js";
import { User, Lock } from '@element-plus/icons-vue'

const formRef = ref(null);
const formData = ref({
  name: '',
  password: '',
  confirmPassword: ''
});

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    if (formData.value.confirmPassword !== '') {
      formRef.value.validateField('confirmPassword');
    }
    callback();
  }
};

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== formData.value.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};

const rules = ref({
  name: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, validator: validatePass, trigger: 'blur'},
    {min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, validator: validatePass2, trigger: 'blur'}
  ]
});

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    if (formData.value.password !== formData.value.confirmPassword) {
      ElMessage.error('两次输入的密码不一致');
      return;
    }
    http.put("/api/common/register", {
      name: formData.value.name,
      password: formData.value.password
    }).then(res => {
      if (!res.code) {
        return
      }
      ElMessage({
        message: "注册成功，正在跳转",
        type: "success"
      });
      router.replace('/login').then(() => {
        window.location.reload();
      });
    });
  });
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  position: relative;
}

.system-logo {
  width: 120px;
  position: absolute;
  left: 300px;
  top: 20px;
}

.main-context {
  width: 100%;
  max-width: 500px;
  margin: 200px auto 0;
}

.box-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  padding: 20px;
}

.register-title {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 600;
}

.register-btn {
  width: 100%;
  height: 45px;
  border-radius: 22.5px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(45deg, #ff0036, #ff6b6b);
  border: none;
  transition: all 0.3s ease;
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 54, 0.3);
}

.login-link {
  display: block;
  text-align: right;
  color: #666;
  text-decoration: none;
  margin-top: 15px;
  font-size: 14px;
  transition: color 0.3s ease;
}

.login-link:hover {
  color: #ff0036;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #ff0036;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}
</style>
